<template>
  <div class="chaoxing-app">

    <AlNavBar @onClickLeft="back" title="ChaoXingApp"/>

    <div class="content">
      <!-- 开关 -->
      <van-cell>
        <i class="iconfont" :class="icon"> 自动签到 </i>
        <van-tag type="success" v-show="running">running</van-tag>
        <van-loading size="10px" v-if="isLoading">加载中...</van-loading>
        <template #right-icon>
          <van-switch v-model="chaoXingInfo.open" :disabled="!isLogin" @click="clickEvent" size="24"/>
        </template>
      </van-cell>

      <div class="setting">
        <AlCell
            :load-title="true"
            :title="title"
            icon="icon-settings"
            @click="goSettings"
            :showRightIcon="!running"
            v-show="isLogin"
        >
          <i class="iconfont icon-ok" v-show="running"></i>
        </AlCell>
      </div>


      <van-form>
        <van-field
            v-model="chaoXingInfo.uname"
            name="用户名"
            label="用户名"
            placeholder="用户名"
            :disabled="isLogin||chaoXingInfo.open"
        />

        <van-field
            v-model="chaoXingInfo.password"
            type="password"
            name="密码"
            label="密码"
            placeholder="密码"
            :disabled="isLogin||chaoXingInfo.open"
        />
        <div class="Login">
          <van-button round @click="toLogin" :color="color" :disabled="isLogin||chaoXingInfo.open">
            <span v-if="!isLoading">登录</span>
            <van-loading size="10px" v-if="isLoading">加载中...</van-loading>
          </van-button>
          <van-button round @click="toLogout" color="black" :disabled="!isLogin||chaoXingInfo.open">
            <span v-if="!isLoading">退出</span>
            <van-loading size="10px" v-if="isLoading">加载中...</van-loading>
          </van-button>
        </div>
      </van-form>

    </div>

  </div>

</template>

<script>
import AlCell from "@/components/AlCell";
import AlNavBar from "@/components/AlNavBar";
import {getData, openOrClose, login} from "@/api/app/chaoxing"
import {mapState} from 'vuex'

export default {
  name: "ChaoXingApp",
  components: {AlNavBar, AlCell},
  data() {
    return {
      running: false,
      isLogin: false,
      chaoXingInfo: {},
      isLoading: true
    }
  },
  created() {
    getData(this.userInfo.id).then(res => {
      if (res.data != null) {
        this.chaoXingInfo = res.data;
        this.isLogin = true;
        this.running = this.chaoXingInfo.open;
        this.isLoading = false;
      } else {
        console.log("未登录")
      }
    })
  },
  methods: {
    back() {
      this.$router.push('/space')
    },
    clickEvent() {
      if (this.isLogin) {
        openOrClose(this.userInfo.id, !this.chaoXingInfo.open).then(res => {
          if (res.success) {
            this.running = !this.running;
          }
        })
      }
    },
    toLogin() {
      this.isLogin = true;
      this.isLoading = true;
      this.chaoXingInfo.name = null;
      login(this.userInfo.id, this.chaoXingInfo).then(res => {
        console.log(res)
        if (!res.success) {
          this.isLogin = false;
        } else {
          this.chaoXingInfo = res.data;
        }
        this.isLoading = false;
      })
    },
    toLogout() {
      this.isLogin = false;
    },
    goSettings() {
      if (this.isLogin) {
        this.$router.push({
          name: 'chaoXingAppSettings'
        })
      }
    }
  },
  computed: {
    ...mapState(['userInfo']),
    color() {
      if (this.isLogin) {
        return "#6ed945";
      } else {
        return "#6d6d6d";
      }
    },
    title() {
      if (this.chaoXingInfo != null && this.chaoXingInfo.name != null) {
        return "课程配置  ( " + this.chaoXingInfo.name + " ) ";
      } else {
        return null;
      }
    },
    icon() {
      if (this.running) {
        return 'icon-lamp-open'
      }
      return 'icon-lamp-close';
    }
  }
}
</script>

<style lang="less">
.chaoxing-app {

  .content {
    padding: 0 5px 0 5px;
    margin-top: 20px;

    .setting {
      margin-top: 5px;
    }

    .icon-ok {
      color: @running-color;
    }

    .van-cell {
      border-radius: 15px;
    }

    .van-form {
      margin-top: 5px;
    }

    .cell-list {
      overflow: hidden;
    }

    .Login {
      margin-top: 15px;

      .van-button {
        margin: 0 10px 0 10px;
      }
    }

  }

  .switch-title {
    font-size: 15px;
    padding-left: 50px;
  }
}
</style>